<!--
    create  by Yang
    监管端后台:首页 => 各区域医废总产量
-->
<template>
    <div class="page-header-index-wide" style="margin-bottom: 20px">
        <a-card :span="24"s :loading="loading" :bordered="false" title="各区域医废总产量" :style="{ marginBottom: '24px' }" >
            <a-row>
                <div class="homePage-container">
                    <div class="chart" id="homePage_table1"></div>
                </div>
            </a-row>
        </a-card>

    </div>
</template>

<script>
  import ACol from 'ant-design-vue/es/grid/Col'
  import { getAction } from '@/api/manage'
  import { mixinDevice } from '@/utils/mixin.js'
  import echarts from 'echarts'


  export default {
    name: 'SuperviseIndexOne',
    components: {
      ACol
    },
    mixins: [mixinDevice],

    data() {
      return {
        area:null, // 区县名称
        sum:null, //医废重量
        newData:null
      }
    },
    mounted() {
      this.getDataSource();

    },
    methods: {
      async getDataSource() {
        let userInfo = this.$store.getters.userInfo;
        let params = {
          areaName: '贵州省', // 当前地名
          areaCode: '520000', // 当前行政区划
          areaLevel: 'province',
        }
        //
        if(userInfo.areaCode){
          params.areaCode = userInfo.areaCode;
          params.areaLevel = 'district';

        }else if(userInfo.cityCode){
          params.areaCode = userInfo.cityCode;
          params.areaLevel = 'city';

        }else if(userInfo.province){
          params.areaCode = userInfo.province;
          params.areaLevel = 'province';
        }

        let res = await getAction('/hc/Statistical/getCityWasteNumber',params)
        if (res && res.success) {
          let data = res.result || [];
          this.area = data.map((item) => item.area);
          this.sum = data.map((item) => item.sum);
          let list = []
          for (let index in this.area) {
            list.push({ name: this.area[index], value: this.sum[index],text: 'KG'})
          }
          list.forEach((item, index) => {
            let value = parseFloat(item.value)
            // value > 10000 kg|公斤
            if (value > 10000) {
              item['weight'] = parseInt(value / 1000)
              item['text'] = '吨'
            } else {
              item['weight'] = value
              item['text'] = 'KG'
            }
          })
          // console.log('list',list)
          this.newData = list

        }
        this.getEchartHomePage1()
      },
      getEchartHomePage1() {
        let myChart = this.$echarts.init(document.getElementById('homePage_table1'))
        let name = []
        this.newData.forEach((item, index) => {
          name.push(item['name'])
        })
        let weight = []
        this.newData.forEach((item, index) => {
          weight.push(item['value'])
        })
        // console.log('weight',weight)
        // 绘制左侧面
        const CubeLeft = echarts.graphic.extendShape({
          shape: {
            x: 0,
            y: 0,
          },
          buildPath: function (ctx, shape) {
            // 会canvas的应该都能看得懂，shape是从custom传入的
            const xAxisPoint = shape.xAxisPoint;
            const c0 = [shape.x + 2, shape.y];
            const c1 = [shape.x - 13, shape.y - 1];
            const c2 = [xAxisPoint[0] - 13, xAxisPoint[1] - 3];
            const c3 = [xAxisPoint[0] + 2, xAxisPoint[1]];
            ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
          },
        });
        // 绘制右侧面
        const CubeRight = echarts.graphic.extendShape({
          shape: {
            x: 0,
            y: 0,
          },
          buildPath: function (ctx, shape) {
            const xAxisPoint = shape.xAxisPoint;
            const c1 = [shape.x + 2, shape.y];
            const c2 = [xAxisPoint[0] + 2, xAxisPoint[1]];
            const c3 = [xAxisPoint[0] + 15, xAxisPoint[1] - 5];
            const c4 = [shape.x + 15, shape.y - 5];
            ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
          },
        });
        // 绘制顶面
        const CubeTop = echarts.graphic.extendShape({
          shape: {
            x: 0,
            y: 0,
          },
          buildPath: function (ctx, shape) {
            const c1 = [shape.x + 2, shape.y+3];
            const c2 = [shape.x + 15, shape.y - 5]; //右点
            const c3 = [shape.x - 0, shape.y - 10];
            const c4 = [shape.x - 13, shape.y - 1];
            ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
          },
        });
        // 注册三个面图形
        echarts.graphic.registerShape('CubeLeft', CubeLeft);
        echarts.graphic.registerShape('CubeRight', CubeRight);
        echarts.graphic.registerShape('CubeTop', CubeTop);
        const VALUE = weight;
        let option = {

          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
            formatter: function (params, ticket, callback) {
              // console.log("params",params)
              const item = params[1];
              return item.name + ' : ' + item.value +"KG"  ;
            },


          },
          grid: {
            left: '1%',
            right: '2%',
            top: '12%',
            bottom: '5%',
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: name,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#b1e1f3',
              },
            },
            axisTick: {
              show: false,
              length: 9,
              alignWithLabel: true,
              lineStyle: {
                color: '#b1e1f3',
              },
            },
            axisLabel: {
              fontSize: 12,
            },
          },
          yAxis: {
            type: 'value',
            name:'单位：KG',
            min: 0,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#b1e1f3',
              },
            },
            splitLine: {
              show: false,
            },

            axisTick: {
              show: false,
            },
            axisLabel: {
              fontSize: 12
            },
            boundaryGap: ['20%', '20%'],
          },
          series: [
            {
              type: 'custom',
              renderItem: (params, api) => {
                let cubeLeftStyle = '';
                let cubeRightStyle = '';
                let cubeTopStyle = '';
                // 颜色
                cubeLeftStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(62,255,255,1)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(0,126,191,1)',
                  },
                ])
                cubeRightStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(23,176,255,1)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(0,138,255,0.3)',
                  },
                ])
                cubeTopStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(163,232,255,1)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(163,232,255,1)',
                  },
                ])
                //颜色end
                const location = api.coord([api.value(0), api.value(1)]);
                return {
                  type: 'group',
                  children: [
                    {
                      type: 'CubeLeft',
                      shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0]),
                      },
                      style: {
                        fill: cubeLeftStyle,
                      },
                    },
                    {
                      type: 'CubeRight',
                      shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0]),
                      },
                      style: {
                        fill: cubeRightStyle,
                      },
                    },
                    {
                      type: 'CubeTop',
                      shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0]),
                      },
                      style: {
                        fill: cubeTopStyle,
                      },
                    },
                  ],
                };
              },
              data: VALUE,
            },
            {
              type: 'bar',
              barMaxWidth:10,
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  fontSize: 14,
                  color: '#2e95f3',
                  offset: [2, -25],
                },
              },
              itemStyle: {
                color: 'transparent',
              },
              tooltip: {},
              data: VALUE ,
            },
          ],
        };

        myChart.setOption(option, true)

        window.addEventListener('resize', () => {
          myChart.resize()
        })
      },



    }
  }
</script>

<style lang="less" scoped>
    .homePage-container {
        .chart {
            height: 6rem;
        }
    }
    .extra-item {
        display: inline-block;

        a {
            margin-left: 10px;
        }


     }



</style>
